<template>
	<div>
		<div>
			<div class="tit">个人信息</div>
			<a-form :form="form" layout="vertical">
				<a-row :gutter="16">
					<a-col :span="6">
						<a-form-item label="出生日期">
							<a-date-picker style="width: 100%" :get-popup-container="trigger => trigger.parentNode" />
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="年龄(自动计算)">
							28岁
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="婚姻状况">
							<a-select v-model="form.region" placeholder="请选择">
								<a-select-option value="shanghai">
									选项一
								</a-select-option>
								<a-select-option value="beijing">
									选项二
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item label="文化程度">
							<a-select v-model="form.region2" placeholder="请选择">
								<a-select-option value="shanghai">
									选项一
								</a-select-option>
								<a-select-option value="beijing">
									选项二
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item label="现居地址">
							<a-input placeholder="请选择地区" />
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="户籍地址">
							<a-radio-group v-model="form.sex">
								<a-radio value="1">
									本地
								</a-radio>
								<a-radio value="2">
									外地
								</a-radio>
							</a-radio-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="12">
						<a-form-item>
							<a-input type="textarea" placeholder="请输入详细地址" />
						</a-form-item>
					</a-col>
					<a-col :span="6" v-show="form.sex==2">
						<a-select v-model="form.region3" placeholder="请选择">
							<a-select-option value="shanghai">
								选项一
							</a-select-option>
							<a-select-option value="beijing">
								选项二
							</a-select-option>
						</a-select>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="8">
						<a-form-item label="沟通语言">
							<a-input placeholder="请输入沟通语言" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="职业/单位">
							<a-input placeholder="请输入职业/单位" />
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="班级/学校">
							<a-input placeholder="请输入班级/学校" />
						</a-form-item>
					</a-col>
				</a-row>
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="所属群体">
							<a-select mode="tags" style="width: 70%" :token-separators="[',']">
								<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
									选项{{ i }}
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div class="border c-m-t-20 c-p-10">
			<div class="tit">家庭情况</div>
			<a-form :form="form" layout="vertical">
				<a-row :gutter="16" v-for="(domain, index) in form.domains">
					<a-col :span="3">
						<a-form-item>
							<a-input placeholder="姓名" />
						</a-form-item>
					</a-col>
					<a-col :span="3">
						<a-form-item>
							<a-input placeholder="关系" />
						</a-form-item>
					</a-col>
					<a-col :span="3">
						<a-form-item>
							<a-input placeholder="职业" />
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item>
							<a-select v-model="domain.tongzhu" placeholder="是否同住">
								<a-select-option value="1">
									是
								</a-select-option>
								<a-select-option value="2">
									否
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item>
							<a-select v-model="domain.fuwu" placeholder="是否已知服务对象">
								<a-select-option value="1">
									是
								</a-select-option>
								<a-select-option value="2">
									否
								</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="6">
						<a-form-item>
							<a-input placeholder="备注" />
						</a-form-item>
					</a-col>
					<a-col :span="1">
						<a-icon v-if="form.domains.length > 1" class="dynamic-delete-button" type="minus-circle-o" :disabled="form.domains.length === 1"
						 @click="removeDomain(domain)" />
					</a-col>
				</a-row>

				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-model-item>
							<a-button type="dashed" style="width: 96%" @click="addDomain">
								<a-icon type="plus" /> 点击新增
							</a-button>
						</a-form-model-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div class="border c-m-t-20 c-p-10">
			<div class="tit">经济情况</div>
			<a-form :form="form" layout="vertical">
				<a-form-item label="家庭收入及主要来源">
					<a-input placeholder="请输入" style="width: 50%" type="textarea" />
				</a-form-item>
				<a-form-item label="福利补贴">
					<a-select mode="tags" style="width: 70%" :token-separators="[',']">
						<a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
							选项{{ i }}
						</a-select-option>
					</a-select>
				</a-form-item>
			</a-form>
		</div>
		<div class="border c-m-t-20 c-p-10">
			<div class="tit">紧急联系人</div>
			<a-form :form="form" layout="vertical">
				<a-row :gutter="16" v-for="(domain, index) in form.domains2">
					<a-col :span="3">
						<a-form-item>
							<a-input placeholder="姓名" />
						</a-form-item>
					</a-col>
					<a-col :span="5">
						<a-form-item>
							<a-input placeholder="与服务对象关系" />
						</a-form-item>
					</a-col>
					<a-col :span="4">
						<a-form-item>
							<a-input placeholder="电话" />
						</a-form-item>
					</a-col>
					<a-col :span="7">
						<a-form-item>
							<a-input placeholder="地址" />
						</a-form-item>
					</a-col>
					<a-col :span="1">
						<a-icon v-if="form.domains2.length > 1" class="dynamic-delete-button" type="minus-circle-o" :disabled="form.domains2.length === 1"
						 @click="removeDomain2(domain)" />
					</a-col>
				</a-row>

				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-model-item>
							<a-button type="dashed" style="width: 80%" @click="addDomain2">
								<a-icon type="plus" /> 点击新增
							</a-button>
						</a-form-model-item>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<div class="border c-m-t-20 c-p-10">
			<div class="tit">其他资料补充</div>
			<a-form :form="form" layout="vertical">
				<a-form-item>
					<a-input placeholder="请输入" style="width: 100%" type="textarea" />
				</a-form-item>
			</a-form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tab: 0,
				labelCol: {
					span: 4
				},
				wrapperCol: {
					span: 14
				},
				form: {
					resource: '1',
					sex: '1',
					weiji: '1',
					pingfen: '1',
					region: '1',
					region3: '1',
					region2: '1',
					domains: [{

					}],
					domains2: [{

					}]
				},
				Top: false,
				rules: {},
				visible: false,
				selectedRowKeys: [],
			}
		},
		methods: {
			handleSubmit() {

			},
			getScroll(event) {
				console.log(event.target.scrollTop)
			},
			onSelectChange(selectedRowKeys) {
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys;
			},
			activeKey(key) {
				console.log(key);
			},
			creat() {
				this.visible = true;
			},
			onClose() {
				this.visible = false;
			},
			removeDomain(item) {
				let index = this.form.domains.indexOf(item);
				if (index !== -1) {
					this.form.domains.splice(index, 1);
				}
			},
			addDomain() {
				this.form.domains.push({
					value: '',
					key: Date.now(),
				});
			},
			removeDomain2(item) {
				let index = this.form.domains2.indexOf(item);
				if (index !== -1) {
					this.form.domains2.splice(index, 1);
				}
			},
			addDomain2() {
				this.form.domains2.push({
					value: '',
					key: Date.now(),
				});
			},
			success() {
				this.$message.success('提交成功，请等待审核');
			},
		}
	}
</script>

<style>
	.title {
		font-weight: bold;
		font-size: 24px;
	}

	.border {
		border: 1px solid #D9D9D9;
	}

	.top0 {
		position: fixed;
		top: 50px;
		left: 0;
	}

	.w-800 {
		width: 800px;
	}

	.tit {
		margin-bottom: 20px;
		color: rgba(0, 0, 0, 0.85);
		font-weight: bold;
		font-size: 14px;
		line-height: 1.5;
	}
</style>
